<!--
 * @Description:@登录
-->
<template>
  <view class="normal-login-container">
    <view class="header-area">
      <view class="logoShell"> </view>
      <view class="welcome">
        <view class="title">欢迎进入</view>
        <view class="componyName">供应链协同系统</view>
      </view>
    </view>
    <view class="padding">
      <view class="loginForm">
        <uni-forms ref="loginFormData" :model="loginForm" :rules="rules">
          <uni-forms-item label="账号" name="username">
            <uni-easyinput
              type="text"
              :inputBorder="false"
              :value="loginForm.username"
              @input="userNameInput"
              placeholder="请输入账号"
            ></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="密码" name="password">
            <uni-easyinput
              type="password"
              :inputBorder="false"
              :value="loginForm.password"
              @input="inputPassword"
              placeholder="请输入密码"
            ></uni-easyinput>
          </uni-forms-item>
        </uni-forms>
        <button
          class="login-btn cu-btn block bg-darkBlue lg round"
          :disabled="btnDisabled"
          :loading="btnLoading"
          @click="formSubmit"
        >
          登 &nbsp;&nbsp;录
        </button>
      </view>
      <!-- <view class="forget-password" v-if="!isFirstLogin">
				<view class="text-center forget-password">
					<text @click="handleForget">忘记密码</text>
				</view>
			</view> -->
      <view class="agreement-container text-center">
        <!-- 复选框 -->
        <u-checkbox-group v-model="checkboxValue" @change="checkboxChange">
          <u-checkbox
            activeColor="#0c3190"
            size="16"
            shape="circle"
            name="checked"
          ></u-checkbox>
        </u-checkbox-group>
        <text @click="handleUserAgrement" class="agreement"
          >同意《格莱默用户使用协议》进入</text
        >
      </view>
    </view>
    <u-toast ref="uToast" position="top"></u-toast>
  </view>
</template>

<script>
import { getWXPhoneNumber, getWXOpenId } from "@/api/login";
import colorGradient from "../../uni_modules/uview-ui/libs/function/colorGradient";
export default {
  data() {
    return {
      checkboxValue: [],
      phone: "", //手机号
      phone_code: "", //获取到的手机code
      openID: "",
      btnLoading: false,
      btnDisabled: false,
      isFirstLogin: false, //首次登陆标志
      loginForm: {
        username: "",
        password: "",
        code: "",
        uuid: "",
      },
      // 校验规则
      rules: {
        username: {
          rules: [
            {
              required: true,
              errorMessage: "请输入账号",
            },
          ],
        },
        password: {
          rules: [
            {
              required: true,
              errorMessage: "请输入密码",
            },
          ],
        },
      },
      showPassword: true,
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 复选框变化
    checkboxChange(e) {
      this.checkboxValue = e;
    },
    // 用户协议
    handleUserAgrement() {
      
    },
    userNameInput(e) {
      // 设置账号自动大写
      this.loginForm.username = e.toUpperCase();
    },
    inputPassword(e) {
      this.loginForm.password = e;
    },
    // 登录
    formSubmit() {
      let phone = this.$store.state.user.phone;
      let openid = this.$store.state.user.openid;
      this.$refs.loginFormData
        .validate()
        .then((res) => {
          const form = this.loginForm;
          form.xcxOpenId = openid;
          form.phone = phone;
          if (!this.checkboxValue.length) {
            this.$refs.uToast.show({
              message: "请勾选用户使用协议",
              type: "warning",
            });
            return;
          }
          this.btnLoading = true;
          this.btnDisabled = true;
          uni.showLoading({
            title: "登录中，请稍候...",
          });
          this.pwdLogin(form);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 密码登录
    async pwdLogin(form) {
      this.$store
        .dispatch("Login", form)
        .then(() => {
          uni.hideLoading();
          this.loginSuccess(this.$store.state.user);
        })
        .catch((error) => {
          this.btnLoading = false;
          this.btnDisabled = false;
        });
    },
    // 登录成功后，处理函数
    loginSuccess(result) {
      // 设置用户信息
      this.$store.dispatch("GetInfo").then((res) => {
        this.btnLoading = false;
        this.btnDisabled = false;
        if (result.isFirstLogin) {
          uni.navigateTo({
            url: `/pages/forceResetPwd?userId=${result.userId}&userName=${result.userName}`,
          });
        } else {
          uni.reLaunch({
            url: "/pages/home/index",
          });
        }
      });
    },
    // 忘记密码
    handleForget() {
      this.$refs.uToast.show({
        message: "请到PC端修改密码",
        type: "warning",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  // background-color: #ffffff;
}

.normal-login-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-image: url("https://glm-1324073348.cos.ap-nanjing.myqcloud.com/static/%E7%99%BB%E5%BD%95%E8%83%8C%E6%99%AF.png");
  background-size: 100% 100%;

  .header-area {
    margin-top: 250rpx;
    // padding-left: 80rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .logoShell {
      width: 150rpx;
      height: 150rpx;
      border-radius: 28rpx;
      background-image: url("https://glm-1324073348.cos.ap-nanjing.myqcloud.com/static/2201a960fb09474caaafa9153d6a1c651709278166768.png");
      background-size: 100%;
      box-shadow: 15rpx 15rpx 15rpx -10rpx rgba(0, 0, 0, 0.15),
        inset 7.5rpx 7.5rpx 10rpx rgba(255, 255, 255, 0.75),
        -5rpx -5rpx 17rpx rgba(255, 255, 255, 0.45),
        inset -10rpx -10rpx 10rpx rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .welcome {
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .title {
        font-size: 33rpx;
        font-weight: 600;
        margin: 16rpx 0;
      }
    }
  }

  .padding {
    padding: 84rpx 64rpx 0;

    .kindsOfLogin {
      margin-top: 130rpx;

      ::v-deep .u-button {
        width: 80%;
        background-color: #ffffff;
        color: #17409b;
        border: none;
        font-weight: 600;
      }

      ::v-deep .u-button--primary.data-v-2bf0e569 {
        // background-color: #FFFFFF;
        // color: #17409b;
      }

      ::v-deep .u-button--success {
        background-color: rgba(196, 202, 211, 0.3);
        color: #ffffff;
      }
    }

    .btnsMid {
      height: 50rpx;
      width: 100%;
    }
  }

  .loginForm {
    // border-top: 1px solid #eee;

    ::v-deep .uni-forms-item {
      border-bottom: 2rpx solid #eee;
      margin-bottom: 0;
      height: 120rpx;
      display: flex;
      align-items: center;
      // flex-wrap: nowrap;
    }

    ::v-deep .uni-easyinput__content {
      // background-color: rgba(0,0,0,0);
      // opacity: 0;
      border-radius: 50rpx;
    }

    ::v-deep .input-placeholder {
      color: #c4cad3 !important;
    }

    ::v-deep .uni-forms-item__label {
      color: #ffffff;
    }
  }

  .uni-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .eye-active {
    color: #007aff;
  }

  .eye-deactive {
    color: #c4cad3;
  }

  .border-top {
    border-top: 1px solid #eee;
  }

  .border-bottom {
    border-bottom: 1px solid #eee;
  }

  .hello-text {
    font-size: 31rpx;
    background: linear-gradient(to right, #0c3190, #4a7ece);
    background-clip: text;
    color: transparent;
    font-weight: bold;
    // margin-left: 30rpx;
    display: flex;
    margin-bottom: 60rpx;
    padding-left: 60rpx;
  }

  .cu-form-group .title {
    min-width: calc(4em + 15px);
  }

  .login-btn {
    margin-top: 116rpx;
    width: 600rpx;
    height: 92rpx;
    border-radius: 50rpx;
    color: #fff;
    background: #0c3190;
  }

  .forget-password {
    color: #c4cad3;
    font-size: 25rpx;
    margin-top: 10rpx;
    display: flex;
    justify-content: center;
  }

  .agreement-container {
    color: #c4cad3;
    margin-top: 40rpx;
    font-size: 23rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .uni-checkbox-input {
      width: 20rpx;
      height: 20rpx;
    }

    .agreement {
      margin-left: 15rpx;
    }
  }

  .login-form-content {
    text-align: center;
    margin: 20px auto;
    margin-top: 15%;
    width: 80%;

    .input-item {
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 20px;

      .icon {
        font-size: 38rpx;
        margin-left: 10px;
        color: #999;
      }

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }
    }

    .reg {
      margin-top: 15px;
    }

    .login-code {
      height: 38px;
      float: right;

      .login-code-img {
        height: 38px;
        position: absolute;
        margin-left: 10px;
        width: 200rpx;
      }
    }
  }
}
</style>
